<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		let colors=[]
			function inx(){
				//1.创建 XMLHttpRequest 对象
				let xhr = new XMLHttpRequest()
				//2.创建请求
				xhr.open("GET","colors.xml",true) //true表示异步请求
				//3.发送请求
				xhr.send()
				//4.接收，解析，显示数据
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status ==200){
						let data = xhr.responseXML
						colors=data.getElementsByTagName("color")
						let select=document.querySelector("select")
						for (let i = 0; i < colors.length; i++) {
							select.options[i]=new Option(colors[i].querySelector("name").innerHTML)//将第i个
						}
						let c=colors[0].querySelector("value").innerHTML
						document.body.setAttribute("style","background-color: "+c+";")
					}
				}
			}
			function fun(){
				let select=document.querySelector("select")
				let index=select.selectedIndex//表示选中的选项索引
				let c=colors[index].querySelector("value").innerHTML
				document.body.setAttribute("style","background-color: "+c+";")
			}
		</script>
	</head>
	<body onload="inx()">
		请选择背景颜色：<select onchange="fun()"></select>
	</body>
</html>
